import * as echarts from "echarts";
const colors = ["#5470C6", "#91CC75", "#EE6666"];

// 外呼任务分析
export const callout = (myChart, answeRate) => {
  myChart.setOption({
    title: {
      text: "外呼任务分析",
    },
    color: colors,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
    },
    grid: {
      right: "20%",
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    legend: {
      data: ["已外呼数", "接听数", "接听占比"],
    },
    xAxis: [
      {
        type: "category",
        axisTick: {
          alignWithLabel: true,
        },
        // prettier-ignore
        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      },
    ],
    yAxis: [
      {
        type: "value",
        // name: '蓝',
        position: "right",
        alignTicks: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: colors[0],
          },
        },
        axisLabel: {
          formatter: "{value} %",
        },
      },
      {
        type: "value",
        // name: '温度',
        position: "left",
        alignTicks: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: colors[2],
          },
        },
        axisLabel: {
          formatter: "{value} 通",
        },
      },
    ],
    series: [
      {
        name: "已外呼数",
        type: "bar",
        yAxisIndex: 0,
        data: [
          2.01, 2.99, 4.01, 5.01, 6.01, 7.01, 8.01, 9.01, 10.01, 11.01, 12.01,
          13.01,
        ],
      },
      {
        name: "接听数",
        type: "bar",
        yAxisIndex: 0,
        data: [
          4.91, 4.92, 4.93, 4.94, 4.95, 4.96, 4.97, 4.98, 4.99, 5.0, 5.01, 5.02,
        ],
      },
      {
        name: "接听占比",
        type: "line",
        yAxisIndex: 1,
        data: [
          7.01, 7.02, 7.03, 7.04, 7.05, 7.06, 7.07, 7.08, 7.09, 7.1, 7.11, 7.12,
        ],
      },
    ],
  });
};

//   接听名单数 接听率
export const figureitemtu = (myChart, answeRate) => {
  myChart.setOption({
    title: {
      text: "27%",
      subtext: "接通率",
      top: "center",
      left: "center",
      textStyle: {
        fontSize: 14,
        fontWeight: 400,
        color: "#2c4f93",
      },
      subtextStyle: {
        fontSize: 14,
        color: "#8eace3",
      },
    },
    color: ["#2c4f93", "#fff"],
    tooltip: {
      trigger: "item",
    },
    // legend: {
    //   top: '5%',
    //   left: 'center'
    // },
    series: [
      {
        // name: 'Access From',
        type: "pie",
        labelLine: {
          show: false,
        },
        radius: ["70%", "100%"],
        center: ["50%", "55%"],
        // adjust the start and end angle
        startAngle: 180,
        endAngle: 360,
        data: [
          { value: 348, name: "接通率" },
          { value: 735, name: "" },
        ],
      },
    ],
  });
};

// A/B意向小图
export const figureitemtutow = (myChart, answeRate) => {
  myChart.setOption({
    title: {
      text: "68%",
      subtext: "意向率",
      top: "center",
      left: "center",
      textStyle: {
        fontSize: 14,
        fontWeight: 400,
        color: "#3f6cce",
      },
      subtextStyle: {
        fontSize: 14,
        color: "#8eace3",
      },
    },
    color: ["#3f6cce", "#fff"],
    tooltip: {
      trigger: "item",
    },
    // legend: {
    //   top: '5%',
    //   left: 'center'
    // },
    series: [
      {
        // name: 'Access From',
        type: "pie",
        labelLine: {
          show: false,
        },
        radius: ["70%", "100%"],
        center: ["50%", "55%"],
        // adjust the start and end angle
        startAngle: 180,
        endAngle: 360,
        data: [
          { value: 65, name: "意向率" },
          { value: 35, name: "" },
        ],
      },
    ],
  });
};

// 平均通话时长 速挂率
export const figureitemtuthree = (myChart, answeRate) => {
  myChart.setOption({
    title: {
      text: "0%",
      subtext: "速挂率",
      top: "center",
      left: "center",
      textStyle: {
        fontSize: 14,
        fontWeight: 400,
        color: "#4090d0",
      },
      subtextStyle: {
        fontSize: 14,
        color: "#8eace3",
      },
    },
    color: ["#4090d0", "#fff"],
    tooltip: {
      trigger: "item",
    },
    // legend: {
    //   top: '5%',
    //   left: 'center'
    // },
    series: [
      {
        // name: 'Access From',
        type: "pie",
        labelLine: {
          show: false,
        },
        radius: ["70%", "100%"],
        center: ["50%", "55%"],
        // adjust the start and end angle
        startAngle: 180,
        endAngle: 360,
        data: [
          { value: 0, name: "速挂率" },
          { value: 35, name: "" },
        ],
      },
    ],
  });
};

// 意向等级分布
export const intention = (myChart, answeRate) => {
  myChart.setOption({
    title: {
      text: "意向等级分布",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "10%",
      left: "center",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"], //圆的大小
        center: ["50%", "60%"], //垂直水平位置
        // avoidLabelOverlap: false,
        label: {
          show: true,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: true,
        },
        data: [
          { value: 1048, name: "A" },
          { value: 735, name: "B" },
          { value: 580, name: "C" },
          { value: 484, name: "D" },
          { value: 300, name: "E" },
        ],
      },
    ],
  });
};


// 对话轮次分布
export const rounds = (myChart, answeRate) => {
  myChart.setOption({
    title: {
      text: "对话轮次分布",
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {
        show: false
      },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['10次及以上', '7-9次', '5-6次', '3-4次', '1-2次','0次']
    },
    series: [
     
      {
        name: '主题',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [820, 832, 901, 934, 1290, 1330, 1320]
      }
    ]
  });
};

// 通话时长分布
export const callduration = (myChart, answeRate) => {
  myChart.setOption({
    title: {
      text: "通话时长分布",
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {
        show: false
      },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['1分钟以上', '30秒-1分钟', '10秒-30秒', '0秒-10秒']
    },
    series: [
     
      {
        name: '主题',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [820, 832, 901, 934, 1290, 1330, 1320]
      }
    ]
  });
};


// 通话状态分布
export const callstatus = (myChart, answeRate) => {
  myChart.setOption({
    title: {
      text: "通话状态分布",
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {
        show: false
      },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['单日呼叫次数超限', '呼叫失败', '用户欠费', '未接听', '无法接通', '拒接', '占线', '停机', '改号', '空号', '关机', '已接听']
    },
    series: [
     
      {
        name: '主题',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [820, 832, 901, 934, 1290, 1330, 1320]
      }
    ]
  });
};


// 自定义标签命中情况
export const customtags = (myChart, answeRate) => {
  myChart.setOption({
    title: {
        text: '自定义标签命中情况',
        left: 'left'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    series: [
        {
            type: 'treemap',
            name: '全自定义标签',
            data: [
                { name: '什么公司/公司优势 438', value: 438 },
                { name: '什么车险 244', value: 244 },
                { name: '已经投保 242', value: 242 },
                { name: '投诉 109', value: 109 },
                { name: '没到期 185', value: 185 },
                { name: '质疑活动/要考虑 150', value: 150 },
                { name: '没有车 99', value: 99 },
                { name: '询问具体业务 81', value: 81 },
                { name: '客户忙 69', value: 69 },
                { name: '打错了 50', value: 50 },
                { name: '车险多少钱 32', value: 32 },
                { name: '挂机了 20', value: 20 }
            ],
            label: {
                show: true,
                formatter: '{b}'
            }
        }
    ],
    visualMap: {
        type: 'piecewise',  // 使用分段式映射
        min: 20,  // 数据的最小值
        max: 438,  // 数据的最大值
        inRange: {
            color: ['#ffb499','#ee6666']  // 固定使用这四种颜色
        },
        show: false
    }
});
};


// 流程节点命中情况
export const processnode = (myChart, answeRate) => {
  myChart.setOption({
    title: {
        text: '流程节点命中情况',
        left: 'left'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    series: [
        {
            type: 'treemap',
            name: '全流程节点',
            data: [
                { name: '什么公司/公司优势 438', value: 438 },
                { name: '什么车险 244', value: 244 },
                { name: '已经投保 242', value: 242 },
                { name: '投诉 109', value: 109 },
                { name: '没到期 185', value: 185 },
                { name: '质疑活动/要考虑 150', value: 150 },
                { name: '没有车 99', value: 99 },
                { name: '询问具体业务 81', value: 81 },
                { name: '客户忙 69', value: 69 },
                { name: '打错了 50', value: 50 },
                { name: '车险多少钱 32', value: 32 },
                { name: '挂机了 20', value: 20 }
            ],
            label: {
                show: true,
                formatter: '{b}'
            }
        }
    ],
    visualMap: {
        type: 'piecewise',  // 使用分段式映射
        min: 20,  // 数据的最小值
        max: 438,  // 数据的最大值
        inRange: {
            color: ['#a9c9ff','#0052d9']  // 固定使用这四种颜色
        },
        // calculable: true,  // 开启滑动条
        // orient: 'horizontal',  // 水平放置
        // left: 'center',
        // bottom: '5%',
        show: false
    }
});
};


// 知识库命中情况
export const knowbase = (myChart, answeRate) => {
  myChart.setOption({
    title: {
        text: '知识库命中情况',
        left: 'left'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    series: [
        {
            type: 'treemap',
            name: '知识库',
            data: [
                { name: '什么公司/公司优势 438', value: 438 },
                { name: '什么车险 244', value: 244 },
                { name: '已经投保 242', value: 242 },
                { name: '投诉 109', value: 109 },
                { name: '没到期 185', value: 185 },
                { name: '质疑活动/要考虑 150', value: 150 },
                { name: '没有车 99', value: 99 },
                { name: '询问具体业务 81', value: 81 },
                { name: '客户忙 69', value: 69 },
                { name: '打错了 50', value: 50 },
                { name: '车险多少钱 32', value: 32 },
                { name: '挂机了 20', value: 20 }
            ],
            label: {
                show: true,
                formatter: '{b}'
            }
        }
    ],
    visualMap: {
        type: 'piecewise',  // 使用分段式映射
        min: 20,  // 数据的最小值
        max: 438,  // 数据的最大值
        inRange: {
            color: ['#c6e7af','#6fbb3e']  // 固定使用这四种颜色
        },
        // calculable: false,  // 开启滑动条
        // orient: 'horizontal',  // 水平放置
        // left: 'center',
        // bottom: '5%',
        show: false
    }
});
};


// 号码归属运营商排名（接通率）
export const operator = (myChart, answeRate) => {
    myChart.setOption({
      title: {
        text: "号码归属运营商排名（接通率）",
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // Use axis to trigger tooltip
          type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        }
      },
      legend: {
        show: false
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: ['中国电信', '中国联通', '中国移动']
      },
      series: [
       
        {
          name: '主题',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [820, 832, 901, 934, 1290, 1330, 1320]
        }
      ]
    });
  };


// 号码归属地排名（接通率）
export const attribution = (myChart, answeRate) => {
    myChart.setOption({
      title: {
        text: "号码归属地排名（接通率）",
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // Use axis to trigger tooltip
          type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        }
      },
      legend: {
        show: false
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: ['河北省', '黑龙江省', '天津市', '陕西省', '江西省', '重庆市', '四川省', '福建省', '山东省', '广东省']
      },
      series: [
       
        {
          name: '主题',
          type: 'bar',
          stack: 'total',
          label: {
            show: false
          },
          emphasis: {
            focus: 'series'
          },
          data: [820, 832, 901, 934, 1290, 1330, 1320]
        }
      ],
    //   visualMap: {
    //     show: false
    //   }
    });
  };